<template>
<el-tooltip
  class="box-item"
  effect="dark"
  content="导出列表"
  placement="bottom"
>
  <div
    id="exportFileListShortcut"
    class="file-export-notice-center"
    @click="toExportFileList"
  >
    <el-badge
      :is-dot="isDot"
    >
      <el-icon><Download /></el-icon>
    </el-badge>
  </div>
</el-tooltip>
</template>

<script lang="ts" setup>
import { ElBadge } from "element-plus"

const router = useRouter();
const store = useStore();
const isDot = ref(false)
const toExportFileList = () => {
  isDot.value = false
  store.commit('SETBOOKLIST', {
    path: '/merchant/exportFileList',
    service: 'MERCHANT'
  })
  router.push("/merchant/exportFileList");
};

const initEvent = () => {
  document.addEventListener("noticeexportevent", handleReceiveNotice, false)
}

const handleReceiveNotice = () => {
  isDot.value = true
}

onMounted(() => {
  initEvent()
})

onBeforeUnmount(() => {
  document.removeEventListener("noticeexportevent", handleReceiveNotice)
})
</script>

<style scoped lang="scss">
.file-export-notice-center:deep(.el-badge) {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>